<template>
  <h1>element-plus</h1>
  <el-button type="primary">Primary</el-button>
  <el-button :plain="true" @click="open2">Success</el-button>
  <h1>svg-icon element-icon</h1>
  <el-icon><IEpuser /></el-icon>
  <el-icon><IEpCirclePlus /></el-icon>
  <svg-icon name="mojie"></svg-icon>
  <h1>pinia</h1>
  <el-button type="primary" @click="add.increment()">click me {{ add.count }}</el-button>
  <!-- <img src="@/assets/images/123.jpg" alt="" /> -->
  <h1>css 兼容处理</h1>
  <div class="flex">
    <div class="item">123</div>
    <div class="item">123</div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue';
import request from '@/utils/request';
import { useCounterStore } from '@/stores/counter';
const add = useCounterStore();
onMounted(async () => {
  const res = await request.get('/home/index');
  console.log(res);
});
const open2 = () => {
  ElMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
  });
};
console.log(123);
</script>
<style lang="less" scoped>
h1 {
  background-color: @warnColor;
  .hoverShadow();
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  --mainColor: #12345678;
}
</style>
